<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">

    <h1>Active Links</h1>
    <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/" exact>/ (exact match)</router-link></li>
        <li><router-link to="/users">/users</router-link></li>
        <li><router-link to="/users" exact>/users (exact match)</router-link></li>
        <li><router-link to="/users/evan">/users/evan</router-link></li>
        <li><router-link to="/users/evan#foo">/users/evan#foo</router-link></li>
        <li>
            <router-link :to="{ path: '/users/evan', query: { foo: 'bar' }}">
                /users/evan?foo=bar
            </router-link>
        </li>
        <li>
            <router-link :to="{ path: '/users/evan', query: { foo: 'bar', baz: 'qux' }}">
                /users/evan?foo=bar&baz=qux
            </router-link>
        </li>
        <li><router-link to="/about">/about</router-link></li>
        <router-link tag="li" to="/about">
            <a>/about (active class on outer element)</a>
        </router-link>
    </ul>
    <router-view class="view"></router-view>
</div>

<script>
    const Home = { template: '<div><h2>Home</h2></div>' }
    const About = { template: '<div><h2>About</h2></div>' }

    const Users = {
        template: `
    <div>
      <h2>Users</h2>
      <router-view></router-view>
    </div>
  `
    }

    const User = { template: '<div>{{ $route.params.username }}</div>' }

    const router = new VueRouter({
        routes: [
            { path: '/', component: Home },
            { path: '/about', component: About },
            { path: '/users', component: Users,
                children: [
                    { path: ':username', component: User }
                ]
            }
        ]
    })

    new Vue({
        router,
    }).$mount('#app')
</script>
</body>
</html>
